Caja contenedora de código personalizada

Me preguntan la forma de crear la caja donde suelo mostrar los códigos y ahí va la respuesta. Para hacerlo agregaremos estilos CSS donde personalizaremos la caja, es decir background, color, margin, padding etc. Lo podemos hacer agregando las propiedades en la plantilla, antes de ]]></b:skin> y el código a añadir es el siguiente:

/* Caja de código */
pre {
background:transparent url(aquí la url de una imagen) no-repeat 0 0; /* Imagen Superior, si deseas cambiarla modifica lo que se encuentra dentro de url(AQUI) */
padding-top:22px; /* Relleno - para ajustar Fondo */
}
pre code {
overflow:auto; /* Determina si es necesario agregar barras de Scroll */

background-color:#E9E9E9; /* Color de Fondo en Hex */
border:1px solid #999999; /* Color de Borde en Hex */
color:#990000; /* Color de letra en Hex */
display:block; /* No tocar */
padding:8px; /* Relleno del cuadro */
white-space:pre; /* No tocar */
text-align:left; /* Alineacion del Texto , left=izquierda, center= centrado, right=derecha */su
min-height:63px; /* Altura minima del Cuadro */
}
/* Cuando pase el Mouse sobre la caja ocurrirá lo siguiente: */
code:hover {
background-color:#ffffff; /* Color de Fondo en Hex */
border:1px solid #666666;/* Color de Borde en Hex */le
}
/* FIN Caja de código */

Donde dice aquí la url de una imagen es el lugar donde podemos añadir una imagen preferiblemente de la misma medida de nuestra caja para que no sobresalga, en mi caso añadí esta:

Si preferimos no añadir imagen bastará con suprimir el texto entre paréntesis. El resto de los valores los podemos adecuar al tamaño según la media que deseamos para nuestra caja así como el lugar donde la añadiremos y los colores para personalizarla.

Una vez guardados los cambios nos situamos en la plantilla de entrada:Configuración/Formato/Plantilla de entrada donde añadiremos <pre><code></code></pre> y guardamos los cambios nuevamente.

Con este último paso lo que conseguimos es que al editar una entrada nos aparezcan automáticamente las etiquetas <pre><code></code></pre> evitándonos tener que copiar y pegar cada vez que vamos a necesitarla. Si no la necesitamos no es problema, la suprimimos de la entrada y listo.

Cuando tengamos que mostrar un código añadiremos dicho código dentro de las etiquetas, es decir: <pre><code>aquí el código</code></pre>

El resultado será más o menos como la caja contenedora de código de esta entrada.

Y eso es todo, suerte Malina.
Convertir código html a texto plano.